<template>
  <div class="bg">
    <div style="width: 350px; height: 400px; background-color: #bda7a7;opacity: 0.7; padding: 40px 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1)">
      <el-form ref="formRef" :model="data.form" :rules="data.rules">
        <div style="margin-bottom: 40px; text-align: center; font-weight: bold; font-size: 24px">文 档 管 理 系 统</div>
        <el-form-item prop="username">
          <el-input size="large" v-model="data.form.name" autocomplete="off" prefix-icon="User" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="large" show-password v-model="data.form.password" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码"/>
        </el-form-item>
       <div>
         <el-button style="width: 100%" size="large" type="primary" @click="login">登 录</el-button>
       </div>
        <div style="text-align: right">
          还没有账号？请<a style="color: #3a8ee6" herf="/register">注册</a>
        </div>
        <div>
          <span><i style="font-weight: bold;">请选择角色</i></span>
          <select v-model="data.form.level" style="height:40px; width: 70px">
            <option
                v-for="item in authorities"
                :value="item.level"
                :key="item.level"
                >
             {{ item.name }}
            </option>
          </select>
        </div>
    </el-form>
    </div>
  </div>
</template>


<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import request from "@/utils/request.js";


const data = reactive({
  form: {
    name: "",
    password: "",
    level: null
  },
  rules: {
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur'},
      {min:3, message: '最少3位', trigger: 'blur'}
    ],
    password: [
      {
        required: true, message: '请输入密码', trigger: 'blur'
      }
    ]
  }
})

const login = () => {
  request.post('/login',data.form).then(res => {
    if(res.data.code === '0') {
      //localStorage.setItem('user', JSON.stringify(res.data.data));
      ElMessage.success('登陆成功')
      router.push('/');
    } else {
      ElMessage(res.data.msg);
    }
  })
}

const authorities = ref([])

const fetchAuthorities = async () => {
  try {
    const res = await request.get("/getAuthority")
    console.log("res=" + res)
    if (res.data.code === '0') {
      authorities.value = res.data.data
    } else {
      ElMessage(res.data.msg);
    }
  } catch (error) {
    ElMessage('获取权限列表失败')
  }
}
onMounted(() => {
  fetchAuthorities()
})
</script>


<style>
.bg {
  height: 100vh;
  display: flex;
  justify-content: center;/*主轴居中*/
  align-items: center;  /*交叉轴居中*/
  overflow: hidden;
  background-image: url("@/assets/imgs/bg.png");
  background-size: cover;
}
</style>